<template>
	<div>

		<!-- 顶部导航栏 -->
		<Header></Header>
		<div>
			<van-icon  class="back" name="arrow-left" size="25"  @click="dd"/>
		</div>
		<div id="container">
			
		</div>

	</div>
</template>

<script>
import Header from '@/components/AppHeader.vue';
import AMapLoader from "@amap/amap-jsapi-loader";
	export default {
		components:{Header},
		data() {
			return {
				map:null,
				marker:"",
				form: {
					lng: "",
					lat: "",
					address: "",
					//地区编码
					adcode: "",
				},
			};
		},
		methods: {
			dd() {
				this.$router.push({
						path:'/index',
				})
			},
			setMapMarker() {
			// 自动适应显示想显示的范围区域
			this.map.setFitView();
			this.marker = new AMap.Marker({
				map: this.map,
				position: [this.form.lng, this.form.lat],
			});
			this.map.setFitView();
			this.map.add(this.marker);
			},
			// 清除点
			removeMarker() {
				if (this.marker) {
					this.map.remove(this.marker);
				}
			},
		},
		mounted() {
			AMapLoader.load({
				key: "2265b768534fd8a6fb4324ee2bb1147a", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: ['AMap.Scale',"AMap.Geocoder", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				this.map = new AMap.Map("container",{
					zoom:17,
					center:[94.067003,35.639114],
					viewMode:'3D',
				});
				//点击获取经纬度;
				this.map.on("click", (e) => {
					// 获取经纬度
					this.form.lng = e.lnglat.lng;
					this.form.lat = e.lnglat.lat;
					// 清除点
					this.removeMarker();
					// 标记点
					this.setMapMarker();
				});
			}).catch((e) => {
				console.log(e);
			});
			
		},
		
	}
</script>

<style lang="scss" scoped>
#container {
	width: 390px;
	height: 795px;
	position: relative;

	
}
.back {
		position: absolute;
		z-index: 999;
		margin-top: 10px;
		margin-left: 15px;
	}
</style>